 {% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>{{ product.product_title }}</title>

    <!-- Bootstrap -->
    <link href="{% static '' %}default/css/bootstrap.min.css" rel="stylesheet">
      <link href="{% static '' %}default/css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
      <script type="text/javascript" src="{% static '' %}default/lib/echarts.min.js"></script>
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="{% static '' %}default/js/bootstrap.min.js"></script>
  </head>
  <body>
  <style>
      .salesinfo p{float: left; text-align: center; }
      .salesinfo p span{padding: 2px 5px;background: #ff5500;border-radius: 5px;color: #ffffff; margin-right: 15px; margin-left: 25px;}
      .salesinfo p span.first{ margin-left: 50px;}
      .salesinfo p em{font-size: 20px;}
    .ranking{z-index:-1;margin-top: 80px;left: -60px;}
    .ranking ol li{line-height: 24px; list-style: none;}
    .user_ranking{margin-top: 80px; float: left;}
    .user_ranking ol li{list-style: none; line-height: 40px;}
    .user_ranking ol li.title{font-weight: bold;}
    .user_ranking ol li span{ padding: 2px 5px; background: #f0ad4e;border-radius: 5px; margin-right: 15px;}
      img.thumb{max-width: 250px;}
</style>
{% include 'default/block_nav.html' %}
  <div class="container theme-showcase" role="main">

      <div class="page-header">
        <h4>Product: {{ product.product_title }}</h4>
      </div>
      <div class="row">
          <div class="col-md-3 col-xs-12">
              <a href="{% url 'aliexpress:open_product' product.product_id %}" target="_blank">
              <img class="thumb" src="{{ product.thumb }}" alt="{{ product.product_title }}"/></a>
          </div>
          <div class="col-md-2">
              <div class="list-group">
                <span href="#" class="list-group-item">
                  价格: {% ifnotequal product.low_price product.high_price%}{{ product.low_price }}-{{ product.high_price }}{% else %}{{ product.high_price }}{% endifnotequal %}
                </span>
                <span href="#" class="list-group-item">
                  心愿单: {{ product.wish_list }}
                </span>
                <span href="#" class="list-group-item">
                  成交量: {{ product.orders }}
                </span>
                <span href="#" class="list-group-item">
                  投票数: {{ product.votes }}
                </span>
                <span href="#" class="list-group-item">
                  评价数: {{ product.all_feedback }}
                </span>
                <span href="#" class="list-group-item">
                  综合评分: {{ product.average_star_rating }}
                </span>
              </div>
          </div>
      <div class="col-md-7">
          <div id="TansData" style="height: 300px;"></div>
          <div class="salesinfo">
              <p>
                  <span class="first">销售总额:</span><em id="totalsales"></em>
              </p>
              <p class="">
                  <span>30天销售额:</span><em id="monthsales"></em>
              </p>
              <p class="">
                  <span>7天销售额:</span><em id="weeksales"></em>
              </p>
              <br>
              <p class="">
                  <span class="first">首单时间:</span><em id="firstOrder"></em>
              </p>
          </div>
      </div>
      </div>

<div class="row charts">
    <div id="CountryRank" class="col-md-8" style="height: 400px;"></div>
    <div class="ranking col-md-2">
    <ol id="rank-item">

    </ol>
</div>
    <div class="col-md-2 user_ranking">
        <ol id="rank-user">
           <li class="title">买家等级排行</li>
        </ol>
    </div>
</div>
<div style="clear: both;"></div>

        <div class="page-header">
            <h2>交易记录 <i class="glyphicon glyphicon-download-alt"><a target="_blank" href="{% url 'downloadcsv' %}?type=t&id={{ product.product_id }}">下载数据</a></i></h2>
        </div>
      <div class="row">
        <div class="col-md-12">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>#</th>
                <th>用户名</th>
                <th>国家</th>
                <th>买家等级</th>
                <th>成交单价</th>
                <th>购买数量</th>
                <th>批量</th>
                <th>评分</th>
                <th>成交时间</th>
              </tr>
            </thead>
            <tbody>
            {% for trans in transactions %}
              <tr>
                <td>{{ trans.id }}</td>
                <td>{{ trans.username }}</td>
                <td>{{ trans.country_name }} ({{ trans.country_code|upper }})</td>
                <td>{{ trans.buyer_leval }}</td>
                <td>{{ trans.price }}</td>
                <td>{{ trans.quantity }}</td>
                <td>{{ trans.lot_num }}</td>
                <td>{{ trans.star }}</td>
                <td>{{ trans.pub_date|date:"Y/m/d H:i" }}</td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
        </div>


      <div class="container text-center">
          <ul class="pagination">
              {% if transactions.has_previous %}
            <li>
              <a href="?page={{ transactions.previous_page_number }}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
                  {% else %}
                  <li class="disabled">
              <a href="#" aria-label="Previous">
                <span aria-hidden="false">&laquo;</span>
              </a>
            </li>
              {% endif %}
          {% for p in transactions.paginator.page_range %}
          {% ifequal p transactions.number %}
            <li class="active"><a href="#">{{ p }}</a></li>
              {% else %}
              <li><a href="?page={{ p }}">{{ p }}</a></li>
          {% endifequal %}
        {% endfor %}
          {% if transactions.has_next %}
            <li>
              <a href="?page={{ transactions.next_page_number }}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          {% else %}
              <li class="disabled">
              <a href="#" aria-label="Next">
                <span aria-hidden="false">&raquo;</span>
              </a>
            </li>
          {% endif %}
          </ul>
      </div>


    </div>
</div>
  <script type="text/javascript">

    var dom = document.getElementById("TansData");
    var myChart = echarts.init(dom);
    var app = {};
    var dateData = new Array();
    var tansData = new Array();
    var multiData = new Array();
    var option = null;

    //$.getJSON("{% static '' %}default/data/transdata.json",function(data){
    $.getJSON("{% url 'aliexpress:transdata' %}?productId={{ product.product_id }}",function(data){
        var result = data["RECORDS"];
        $.each(result,function(idx,trans){
            dateData.push(trans["pubdate"]);
            tansData.push(parseInt(trans["orders"]));
            multiData.push(parseInt(trans["multorder"]));
        });
        option = {
        title: {
            text: '最近6个月成交趋势'
        },
        tooltip: {},
        legend: {
            data:['销量','多件订单']
        },
        xAxis: {
            data: dateData
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            data: tansData
        },
        {
            name: '多件订单',
            type: 'bar',
            data: multiData
        }]
        };
        myChart.setOption(option);
    });

</script>

  <script>
        var dom2 = document.getElementById("CountryRank");
        var rankChart = echarts.init(dom2);
        var countryName = new Array();
        var orders = new Array();
        var allData = new Array();
        var option2 = null;

        //$.getJSON("data/trans_country.json",function(data){
        $.getJSON("{% url 'aliexpress:countryrank' %}?productId={{ product.product_id }}",function(data){
        var result = data["RECORDS"];
        var c = 0;
        $.each(result,function(idx,trans){
            if(c >9){
                return ;
            }
            countryName.push(trans["country_name"]);
            orders.push(parseInt(trans["orders"]));
            allData.push({value:parseInt(trans["orders"]),name:trans["country_name"]})
            c +=1;
            $('#rank-item').append('<li>'+parseInt(trans["orders"])+'</li>');
        });
        option2 = {
            title: {
                text: 'Top10国家排行榜'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                top:'80',
                data: countryName
            },
            series: [{
                name: '销量',
                type: 'pie',
                data: allData
            }
            ]
        };
        rankChart.setOption(option2);
    });

  </script>
  <script>
      $.getJSON("{% url 'aliexpress:userrank' %}?productId={{ product.product_id }}",function(data){
          var result = data["RECORDS"];
          $.each(result,function(idx,trans){
              $('#rank-user').append('<li><span>'+trans["buyer_leval"]+'</span>'+parseInt(trans["orders"])+'</li>');
          });
      });
  </script>
  <script>
      $.getJSON("{% url 'aliexpress:getsales' %}?productId={{ product.product_id }}",function(data){
          $('#totalsales').append(data["TotalSales"]);
          $('#monthsales').append(data["MonthSalse"]);
          $('#weeksales').append(data["WeekSalse"]);
          $('#firstOrder').append(data["MinDay"]);
      });
  </script>
{% include 'default/tongji.html' %}
  </body>
</html>